<template>
  <el-dialog title="添加泊位" :visible.sync="visible" center>
    <el-container>
      <el-main>
        <el-form :label-position="labelPosition" :rules="rules" :model="addSpaceForm" ref="addSpaceForm" size="mini" label-width="90px">
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="parkName" label="所在车场">
                <el-input v-model="addSpaceForm.parkName" @click.native="openPark" type="text" placeholder="所在停车场"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="berthNO" label="泊位编号">
                <el-input v-model="addSpaceForm.berthNO" type="text" placeholder="泊位编号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="roads" label="所在路段">
                <el-input v-model="addSpaceForm.roads" @click.native="openRoad" type="text" placeholder="所在路段"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="roadsNo" label="路段内编号">
                <el-input v-model="addSpaceForm.roadsNo" type="text" placeholder="路段内编号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="berthType" label="泊位类型">
                <el-select v-model="addSpaceForm.berthType" placeholder="泊位类型" style="width: 100%">
                  <el-option v-for="item in numType" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="berthStatus" label="泊位状态">
                <el-select v-model="addSpaceForm.berthStatus" placeholder="泊位状态" style="width: 100%">
                  <el-option v-for="item in numStatus" :key="item.id" :value="item.id" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="longirude" label="经度">
                <el-input v-model="addSpaceForm.longirude" type="text" placeholder="经度"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="longirude" label="经度">
                <el-input v-model="addSpaceForm.lat" type="text" placeholder="纬度"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="terrestrial" label="地磁设备">
                <el-input v-model="addSpaceForm.terrestrial" type="text" placeholder="地磁设备"/>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3">
              <div>&nbsp;</div>
            </el-col>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="berthSize" label="泊位尺寸">
                <el-input v-model="addSpaceForm.berthSize" type="text" placeholder="泊位尺寸"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="10" :sm="10" :lg="10">
              <el-form-item prop="remarks" label="备注">
                <el-input v-model="addSpaceForm.remarks" type="text" placeholder="备注"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="addBtn"  @click="submitForm('addSpaceForm')">确定</el-button>
        <el-button @click="resetForm('addSpaceForm')">重置</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
  import { selDictonary } from '../../../api/dictionary'
  import { addBreth } from '../../../api/parkingResource/parkingSpace'

  export default {
    name: 'parkingSpaceAdd',
    data() {
      return {
        visible: false,
        addBtn: false,
        labelPosition: 'left',
        numType: [], // 泊位类型
        numStatus: [], // 泊位状态
        rules: {
          parkName: [
            { required: true, message: '请选择车场', trigger: 'change' }
          ],
          berthNO: [
            { required: true, message: '请输入泊位编号', trigger: 'blur' }
          ],
          roads: [
            { required: true, message: '请选择所在路段', trigger: 'change' }
          ],
          roadsNo: [
            { required: true, message: '请输入路段编号', trigger: 'blur' }
          ],
          berthType: [
            { required: true, message: '请选择泊位类型', trigger: 'change' }
          ],
          berthStatus: [
            { required: true, message: '请选择泊位状态', trigger: 'change' }
          ]
        },
        addSpaceForm: {
          parkNo: '',
          parkName: '',
          berthNO: '',
          roads: '',
          roadsNum: '',
          roadsNo: '',
          berthType: '',
          berthStatus: '',
          longirude: '',
          lat: '',
          berthSize: '',
          terrestrial: '',
          remarks: ''
        }
      }
    },
    props: ['addBerthVisible', 'parkName2', 'roadName2'],
    mounted: function() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'placetype') {
            this.numType = content[i].comboboxDetailList
          } else if (content[i].id === 'enableflag') {
            this.numStatus = content[i].comboboxDetailList
          } else {
            continue
          }
        }
      })
    },
    watch: {
      addBerthVisible: function(val) {
        this.visible = val
      },
      visible: function(val) {
        this.$emit('update:addBerthVisible', val)
      },
      parkName2: function(val) {
        this.addSpaceForm.parkName = val.parkname
        this.addSpaceForm.parkNo = val.parkno
      },
      roadName2: function(val) {
        this.addSpaceForm.roads = val.unitname
        this.addSpaceForm.roadsNum = val.unitno
      }
    },
    methods: {
      submitForm: function(addSpaceForm) {
        this.$refs[addSpaceForm].validate((valid) => {
          if (valid) {
            this.addBtn = true
            addBreth(this.addSpaceForm).then(res => {
              this.addBtn = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.visible = false
              this.$emit('update:parkName2', '')
              this.$emit('update:roadName2', '')
              this.$refs[addSpaceForm].resetFields()
            })
          }
        })
      },
      resetForm: function(addSpaceForm) {
        this.$refs[addSpaceForm].resetFields()
      },
      openPark: function() {
        this.$emit('openParkAdd', true)
      },
      openRoad: function() {
        this.$emit('openRoadAdd', true)
      }
    }
  }
</script>

<style scoped>
.el-footer{
  text-align: center;
}
</style>
